<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>我的论坛</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

		
		<script th:src="@{/js/jquery.min.js}" ></script>
		<script th:src="@{/js/afquery.js}" ></script>
		<link rel="stylesheet" th:href="@{/css/common.css}" href="../../css/common.css" />
		<link rel="stylesheet" th:href="@{/css/user.css}" href="../../css/user.css" />
		

		<script src="../../layer/layer.js" th:src="@{/layer/layer.js}"></script>
		<style>

			
		</style>
	</head>
	<body>	
	<div class='container'>
	
		<!--头部-->
		<div th:replace="~{common::header}"></div>
		
		
		<div class='main'>
			<!-- <div class='head'>
				我的论坛</a> | 用户注册
			</div> -->
			<div class="head" style="border: 0;">
				<svg viewBox="0 0 1000 300">
				  <symbol id="line-text">
					<text text-anchor="middle" x="50%" y="50%" dy=".4em">
					  我的论坛|用户注册
					</text>
				  </symbol>
			
				  <use xlink:href="#line-text" class="text"></use>
				  <use xlink:href="#line-text" class="text"></use>
				  <use xlink:href="#line-text" class="text"></use>
				  <use xlink:href="#line-text" class="text"></use>
				</svg>
			</div>
			
			
			<div class='form' >
				<div class='row'>
					<span class='label'> 账号 </span>
					<input class='id' type='text'  oninput = "value=value.replace(/[^\d]/g,'')"
						   placeholder="账号非必填项">
				</div >

				<div class='row'>
					<span class='label'> 用户名 </span>
					<input class='name' type='text' 
						onkeydown="nameDet($('.name').val().trim())"
					   onmouseenter="nameDet($('.name').val().trim())"
					   onmouseleave="nameDet($('.name').val().trim())"/>
					<div class="nameDet row"  style="display:none;">
						<span class='label'></span>
						<input value="用户名不得为空或空格"  style="color:red" readonly/>
					</div>
					<script>
						var nameDet = function(name)
						{
							if(name.length==0){
								$('.nameDet').show();
							}
							else if(name.length>0){
								$('.nameDet').hide();
							}
						}
					</script>
				</div >
				
				<div class='row'>
					<span class='label'> 密码 </span>
					<input class='password' type='password' onkeydown="passDet($('.password').val().trim())"
					   onmouseenter="passDet($('.password').val().trim())"
					   onmouseleave="passDet($('.password').val().trim())">
					
					<div class="passDet row"  style="display:none;">
						<span class='label'></span>
						<input value="密码不得为空或空格"  style="color:red" readonly/>
					</div>
					<script>
						var passDet = function(password)
						{
							if(password.length==0){
								$('.passDet').show();
							}
							else if(password.length>0){
								$('.passDet').hide();
							}
						}
					</script>
				</div>

				<div class='row'>
					<span class='label'> 确认 </span>
					<input class='password2' type='password' >
				</div>

				<div class='row'>
					<span class='label'> 验证码 </span>
					<input class='state' type='text'
						   onkeydown='if(event.keyCode==13)my.register();'>
					<img class='verifyImg' style='width:80px;height:30px;background-color: #f5f59e;' onclick="my.refState()" title="点击刷新验证码">
				</div >

				<div class='row'>
					<span class='label'> &nbsp; </span>
					<button onclick='my.register()' class='primary' style='margin-top:40px'> 注册用户 </button>
					<a href="login.html" th:href='@{/login}' class="register"> 返回登录 </a>
				</div>	
											
			</div>
		</div>

	</div>

	<div th:insert="~{common::footer}"></div>
	<script>
		var my = {};
		
		my.register = function(){
			var req = {};
			var user = {};
            user.id = Number($('.id').val());
            user.name = $('.name').val().trim();
			user.password = $('.password').val().trim();
			var password2 = $('.password2').val().trim();
			req.user = user;

            req.state = $('.state').val().trim();
            if(req.state.length==0){
                alert('验证码不得为空!') ; return;
            }
            req.state = Number($('.state').val());
            if(req.state.length==0 || isNaN(req.state)){
                alert('请正确输入验证码!') ; return;
            }

            if(user.id==null){
                alert('账号不得为空!') ; return;
            }
			if(user.name.length ==0){
				alert('用户名不得为空!') ; return;
			}
			if(user.password.length == 0){
				alert('密码不得为空!');return;
			}
			if(user.password != password2){
				alert('密码不一致!');return;
			}

			Af.rest('[[@{/register.do}]]'  , req, function(data){
				alert('注册成功，您的账号是' + data);
                location.href = '[[@{/prompt}]]/' + data ;  // 跳到登录页
			},function (error, reason) {
                alert(reason);
                my.refState();
            })
		}

        my.refState = function () {
            Af.rest("[[@{/loginState.do}]]", "", function (data) {
                $('.state').attr("placeholder", data);
                $('.state').val("");
                var verifyImgUrl = '[[@{/show}]]?t=' + new Date().getTime();
                $('.verifyImg').attr('src', verifyImgUrl);
            })
        }

        Af.rest('[[@{/loginState.do}]]' , "", function(data){
            var verifyImgUrl = '[[@{/show}]]?t=' + new Date().getTime();
            $('.verifyImg').attr('src', verifyImgUrl);
            $('.state').val("");
        })
	</script>
	</body>
</html>
